<template>
  <div class="search-item-container">
    <div class="search-item-top flex">
      <el-input
        style="border: none; box-shadow: none"
        autofocus
        v-model="searchInp"
        size="small"
        class="search-item-top-left"
        :prefix-icon="Search"
        @input="handelSearch"
        @change="handelChange"
      />
      <svg
        @click="removeInp"
        v-if="searchInp"
        class="input-icons"
        t="1704728147094"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="10795"
        width="16"
        height="16"
      >
        <path
          d="M512.2 64.4c-247.4 0-447.9 200.6-447.9 448s200.5 447.9 447.9 447.9 447.9-200.5 447.9-447.9-200.5-448-447.9-448z m203.5 605.9c12.5 12.5 12.5 33.1 0 45.6s-33.1 12.5-45.6 0l-158-158-158 158c-12.5 12.5-33.1 12.5-45.6 0s-12.5-33.1 0-45.6l158-158-158-158c-12.5-12.5-12.5-33.1 0-45.6s33.1-12.5 45.6 0l158 158 158-158c12.5-12.5 33.1-12.5 45.6 0s12.5 33.1 0 45.6l-158 158 158 158z"
          p-id="10796"
          fill="#A3A3AC"
        ></path>
      </svg>
      <div class="search-item-top-right" @click="$router.push({path:'/'})">取消</div>
    </div>
    <div v-if="!searchInp" class="search-item-center">
      <div class="search-item-center-top flex">
        <div class="search-item-center-top-title">搜索历史</div>
        <svg
          t="1704700461958"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1645"
          width="16"
          height="16"
        >
          <path
            d="M847.743 223.953H640.639c-3.132-68.921-60.177-124.029-129.858-124.029s-126.726 55.108-129.858 124.029H173.256c-17.673 0-32 14.327-32 32s14.327 32 32 32h674.487c17.673 0 32-14.327 32-32s-14.327-32-32-32z m-336.962-60.03c34.379 0 62.689 26.426 65.718 60.029H445.064c3.029-33.603 31.338-60.029 65.717-60.029zM767.743 351.79c-17.673 0-32 14.327-32 32v478.173H288.256V383.79c0-17.673-14.327-32-32-32s-32 14.327-32 32v510.173c0 17.673 14.327 32 32 32h511.487c17.673 0 32-14.327 32-32V383.79c0-17.673-14.327-32-32-32z"
            fill=""
            p-id="1646"
          ></path>
          <path
            d="M449.306 732.802V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999zM640.84 732.802V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z"
            fill=""
            p-id="1647"
          ></path>
        </svg>
      </div>
      <div class="flex search-item-center-content">
        <div class="search-item-center-buttom">
          <span> 有声的紫襟 </span>
        </div>
        <div class="search-item-center-buttom">
          <span> 有声的 </span>
        </div>
        <div class="search-item-center-buttom">
          <span> 有声的紫襟 </span>
        </div>
        <div class="search-item-center-buttom">
          <span> 有声的紫襟 </span>
        </div>
      </div>
      <el-tabs class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane
          v-for="categoryList in category"
          :key="categoryList.categoryId"
          class="enlarged"
          :label="categoryList.categoryName"
          :name="categoryList.categoryId"
        >
          <div
            class="tab-list flex"
            v-if="hotWordResultList.length"
            v-for="(hotWordResultItem, index) in hotWordResultList"
            :key="hotWordResultItem.score"
          >
            <span class="tab-list-num">{{ index + 1 }}</span>
            <div class="tab-item-title flex">
              <div>{{ hotWordResultItem.word }}</div>
              <svg
                v-if="hotWordResultItem.shift == 1"
                t="1704713506032"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2984"
                width="16"
                height="16"
              >
                <path
                  d="M752.64 376.32 546.56 202.88c-19.2-16-50.56-16-69.76 0L270.72 376.32C240 402.56 261.76 447.36 305.28 447.36L384 447.36C384 447.36 384 448 384 448l0 320c0 35.2 28.8 64 64 64l128 0c35.2 0 64-28.8 64-64L640 448c0 0 0-0.64 0-0.64l78.08 0C761.6 447.36 783.36 402.56 752.64 376.32z"
                  p-id="2985"
                  fill="#E44B3B"
                ></path>
              </svg>
              <svg
                v-if="hotWordResultItem.shift == -1"
                t="1704713908514"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6088"
                width="16"
                height="16"
              >
                <path
                  d="M754.2 553.7l-225 282.1c-8.8 11.1-25.6 11.1-34.5 0l-225-282.1c-11.5-14.4-1.2-35.8 17.2-35.8h132.5v-313c0-13.8 11.2-25 25-25H583c13.8 0 25 11.2 25 25v313h129c18.5 0 28.7 21.4 17.2 35.8z"
                  fill="#93CC48"
                  p-id="6089"
                ></path>
              </svg>
              <svg
                v-if="hotWordResultItem.shift == 0"
                t="1704713751341"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="17815"
                width="16"
                height="16"
              >
                <path
                  d="M768 512c0-35.3-28.7-64-64-64H320c-35.3 0-64 28.7-64 64s28.7 64 64 64h384c35.3 0 64-28.7 64-64z"
                  fill="#DEDEDF"
                  p-id="17816"
                ></path>
              </svg>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else class="show-item-contaniner">
      <div v-if="realTimeList" class="show-item-top flex">
        <img
          class="show-item-img"
          :src="realTimeList.imgPath"
          alt=""
        />
        <div class="show-item-right flex">
          <div class="show-item-right-title" @click="hanldeDetail">
            <div class="show-item-right-title-span"
              >{{ realTimeList.keyword }}</div
            >
            <div class="show-item-right-title-bottom flex">
              <span class="show-item-right-title-bottom-tag">{{ realTimeList.category }}</span>
              <div class="show-item-right-title-bottom-erji flex">
                <svg
                  t="1704760146237"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="27513"
                  width="16"
                  height="16"
                >
                  <path
                    d="M920.8 600.5V491c0-55.7-11-109.8-32.7-160.9-20.9-49.3-50.9-93.6-88.9-131.6-38.1-38.1-82.4-68-131.6-88.9-51.1-21.7-105.2-32.7-160.9-32.7s-109.8 11-160.9 32.7c-49.3 20.9-93.6 50.9-131.6 88.9-38.1 38.1-68 82.4-88.9 131.6-21.9 51.1-32.9 105.2-32.9 160.9v109.5c-21.7 33.2-33.2 73.2-33.2 115.6 0 42.6 11.6 82.7 33.4 116 17.8 27.2 41.7 47.9 68.5 59.8 9.6 32.2 39.5 55.7 74.7 55.7H265c43 0 78-35 78-78v-307c0-43-35-78-78-78h-29.2c-35.2 0-65.1 23.5-74.7 55.7-4.3 1.9-8.6 4.1-12.8 6.5V491c0-48.1 9.5-94.9 28.2-139 18.1-42.6 44-81 77-113.9 33-33 71.3-58.9 113.9-77 44.1-18.7 90.9-28.2 139-28.2 48.1 0 94.9 9.5 139 28.2 42.6 18.1 81 44 113.9 77 33 33 58.9 71.3 77 113.9 18.7 44.1 28.2 90.9 28.2 139v55.8c-4.2-2.4-8.4-4.6-12.8-6.5-9.6-32.2-39.5-55.7-74.7-55.7h-29.2c-43 0-78 35-78 78v307c0 43 35 78 78 78H777c35.2 0 65.1-23.5 74.7-55.7 26.8-12 50.7-32.7 68.5-59.8 21.9-33.3 33.4-73.4 33.4-116 0.4-42.4-11.1-82.3-32.8-115.6z"
                    fill="#A3A3AC"
                    p-id="27514"
                  ></path>
                </svg>
                <span>{{ (realTimeList.play /100000000).toFixed(2) }}亿</span>
              </div>
              <div class="show-item-right-title-bottom-radio flex">
                <svg
                  t="1704760505227"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="32607"
                  width="16"
                  height="16"
                >
                  <path
                    d="M760.89 263.11v497.78h-99.56V263.11h99.56z m-398.22 0v497.78h-99.56V263.11h99.56zM163.56 412.44v199.11H64V412.44h99.56z m796.44 0v199.11h-99.56V412.44H960zM561.78 113.78v796.44h-99.56V113.78h99.56z"
                    p-id="32608"
                    fill="#A3A3AC"
                  ></path>
                </svg>
                <span>{{realTimeList.tracks}}集</span>
              </div>
            </div>
          </div>
          <svg
            t="1704760685228"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="33802"
            width="16"
            height="16"
          >
            <path
              d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z"
              fill="#A3A3AC"
              p-id="33803"
            ></path>
          </svg>
        </div>
      </div>
      <div class="show-list" @click="handelSearchResult" v-for="queryResultItem in queryResultList" :key="queryResultItem.id">
        <div class="show-titles-item" v-html="queryResultItem.highlightKeyword">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref,nextTick } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  reqSearchTabs,
  reqHotWordBillboard,
  reqSuggestData,
} from "../../api/search/index.js";
import { TabsPaneContext } from "element-plus";
import { useRouter } from "vue-router";

const $router = useRouter()
// 收集到的input数据
const searchInp = ref("");

// 分类下面的数据条数
const size: number = 16;

function handleClick(pane: TabsPaneContext) {
getHotWordBillboard({ categoryId: pane.props.name, size });
  
}
// 储存分类的数据
const category: any = ref([]);
// 储存分类下面的数据
const hotWordResultList: any = ref([]);
// 储存实时关键字列表的数据
const realTimeList: any = ref({});

const queryResultList:any = ref([])
// 清除input的值----回调
const removeInp = () => {
  searchInp.value = "";
};

// 挂载调用功能函数
onMounted(() => {
  searchData();
  nextTick(()=>{
      if (category.value[0]) {
    getHotWordBillboard({ categoryId: -1, size });
  }
  })

});
async function searchData() {
  await getSearchTabs();
}
// input失去焦点触发的回调
function handelSearch() {
  getSuggestData({kw: searchInp.value,paidFilter: false,})
  // getSuggestData({kw: searchInp.value,paidFilter: false})

}
function handelChange(){
}

// 点击跳转至详情页
function hanldeDetail(){
  $router.push({
    path:'/detail'
  })
}
// 点击跳转至搜索结果页
function handelSearchResult(){
  $router.push({
    path:'/searchResult',
    query:{
      kw:searchInp.value
    }
  })
}
// 触发input的功能函数
async function getSuggestData({kw,paidFilter}:any){
  try {
    let result = await reqSuggestData({
      kw,
      paidFilter
    });
    if (result.ret == 200) {
      realTimeList.value = result.data.result.albumResultList[0];
      queryResultList.value = result.data.result.queryResultList;
    }
  } catch (error) {
    console.log(error);
  }
}

// 获取分类的数据功能函数
async function getSearchTabs() {
  try {
    let result: any = await reqSearchTabs();
    console.log(3);
    category.value = result.category;
  } catch (error) {
    console.log(error);
  }
}

// 获取分类下面的数据的功能函数
async function getHotWordBillboard({ categoryId, size }: any) {
  try {
    let result = await reqHotWordBillboard({ categoryId, size });
    hotWordResultList.value = result.hotWordResultList;

  } catch (error) {
    console.log(error);
  }
}
</script>

<style scoped>
.search-item-container {
  width: 100%;
}
.search-item-top {
  height: 30px;
  padding: 8px 14px;
  position: relative;
}
.input-icons {
  position: absolute;
  right: 70px;
  top: 14px;
}
.search-item-top-right {
  font-size: 16px;
  color: #333;
  padding-left: 10px;
  line-height: 32px;
}
:deep(.el-input--small) {
  font-size: 16px;
}
.search-item-top-left {
  width: 300px;
  height: 30px;
  border-radius: 50px;

  background-color: #eff1f4;
}





.search-item-center {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 14px;
}
.search-item-center-top-title {
  font-size: 14px;
}
.search-item-center-top {
  /* width: 200px; */
  width: 100%;
  justify-content: space-between;
}
:deep(.el-input__wrapper) {
  border-radius: 50px;
  background-color: #eff1f4;
  box-shadow: none !important;
}
.el-input {
  border: none;
}
.search-item-center-buttom {
  height: 40px;
  margin: 0px 10px 10px 0px;
}
.search-item-center-buttom span {
  padding: 10px 15px;
  font-size: 12px;
  background-color: #eff1f4;
  border-radius: 5px;
}
.search-item-center-content {
  flex-wrap: wrap;
  /* margin-top: 10px; */
}

/* 导航栏 */

:deep(.el-tabs__item) {
  padding: 0px 22px 0px 0px !important;
  color: #a3a3ac;
}

/* 字体变大动画 */
.enlarged {
  font-size: 18px !important;
  font-weight: 300px !important;
  transition: font-size 0.3s ease !important;
}
/* F06742 */
:deep(.el-tabs__active-bar) {
  height: 3px;
  border-radius: 3px;
  background-color: #f06742;
  width: 25px !important;
}
:deep(.el-tabs__header) {
  margin: 0px;
}
.tab-list {
  padding: 0px 30px 0px 10px;
  height: 45px;
}
.tab-list-num {
  width: 20px;
  font-size: 20px;
  line-height: 45px;
  font-weight: bold;
  text-align: center;
  padding-right: 20px;
  color: #dabda6;
}
.tab-list:nth-child(1) .tab-list-num {
  color: #ff0c0b;
}
.tab-list:nth-child(2) .tab-list-num {
  color: #f86342;
}
.tab-list:nth-child(3) .tab-list-num {
  color: #f8a642;
}
/* F8A642 */
.tab-item-title {
  color: #333;
  font-size: 16px;
  flex: 1;
  justify-content: space-between;
  line-height: 45px;
  border-bottom: 1px solid #e8e8e8;
}
.tab-item-title > svg {
  margin: auto 0;
}


.show-item-contaniner {
  padding: 0px 15px;
}
.show-item-top {
  width: 100%;
  height: 40px;
  padding: 15px 0px;
  justify-content: space-between;
}
.show-item-img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.show-item-right {
  flex: 1;
}
.show-item-right > svg {
  width: 24px;
  height: 24px;
  margin: auto 0 ;
}
.show-item-right-title {
 height: 16px;
 width: 263px;
}
.show-item-right-title-span {
  width: 250px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 

}
.show-item-right-title-bottom {
  margin-top: 5px;
  height: 16px;
}
.show-item-right-title-bottom-tag {
  font-size: 9px;
  border: 1px solid #a3a3ac;
  border-radius: 3px;
  /* height: 30px; */
  color: #a3a3ac;
  margin-right: 15px;
  line-height: 13px;
  padding: 0px 4.5px;

}
.show-item-right-title-bottom-erji{
  line-height: 20px;
  margin-right: 15px;
}
.show-item-right-title-bottom-erji >span {
  font-size: 12px;
  color: #a3a3ac;
  margin-left: 2px;
  line-height: 18px;
}
.show-item-right-title-bottom-radio {
  /* line-height: 20px; */
  margin-right: 15px;
}
.show-item-right-title-bottom-radio >span {
  margin-left: 2px;
  font-size: 12px;
  color: #a3a3ac;
  line-height: 18px;

}
.show-item-right-title-bottom-erji > svg {
  width: 10px;
  height: 10px;
  margin: auto 0;
  
}
.show-item-right-title-bottom-radio >svg {
  width: 10px;
  height: 10px;
  margin: auto 0;
}

.show-list {
  height: 40px;
  border-top: 1px solid #E1E1E1;

}
.show-list:last-child{
  border-bottom: 1px solid #E1E1E1;
}
.show-titles-item{
  font-size: 14px;
  color: #40404c;
  margin-top: 10px;
}
</style>
